import { Badge } from '/components/badge'

# Web 页面配置

主要用于配置插入第三方页面时，插入的页面的配置信息，您可以通过调整该配置，修改和扩展插入第三方页面时的配置。<Badge theme="success">v6.0.0 新增</Badge>

## 默认配置

```js
{
  webPages: [
    {
      label: {
        zh_CN: '哔哩哔哩',
        en_US: 'Bilibili',
      },
      icon: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.39 3.714h.5c.88.032 1.614.337 2.2.918.586.58.889 1.312.91 2.194v4.293c-.021.88-.324 1.615-.91 2.201-.586.586-1.32.889-2.2.91H4.11c-.88-.021-1.614-.324-2.2-.91-.586-.586-.889-1.32-.91-2.2V6.825c.021-.882.324-1.613.91-2.194.586-.58 1.32-.886 2.2-.918h.452l-.684-.653a.72.72 0 0 1-.218-.529.72.72 0 0 1 .218-.529l.015-.015a.763.763 0 0 1 .537-.218c.202 0 .38.072.537.218L6.63 3.59c.041.041.078.083.109.124h2.49a.487.487 0 0 1 .092-.124l1.665-1.602a.763.763 0 0 1 .536-.218c.203 0 .386.088.542.233a.691.691 0 0 1 .228.53.72.72 0 0 1-.217.528l-.685.653zm-7.28 1.51c-.434.01-.8.16-1.096.45-.295.29-.448.66-.458 1.105v4.387c.01.445.163.813.458 1.104.296.29.662.441 1.097.45h7.778c.435-.009.801-.16 1.097-.45.295-.29.448-.659.458-1.104V6.779c-.01-.446-.163-.814-.458-1.105a1.563 1.563 0 0 0-1.097-.45H4.111zm1.557 2.255c.217 0 .399.072.544.218a.809.809 0 0 1 .233.56v.684a.809.809 0 0 1-.233.56.736.736 0 0 1-.544.218.739.739 0 0 1-.545-.218.809.809 0 0 1-.233-.56v-.684c0-.218.075-.402.225-.553a.753.753 0 0 1 .553-.225zm4.666 0c.218 0 .4.072.545.218a.809.809 0 0 1 .233.56v.684a.809.809 0 0 1-.233.56.737.737 0 0 1-.545.218.739.739 0 0 1-.544-.218.809.809 0 0 1-.233-.56v-.684a.809.809 0 0 1 .233-.56.738.738 0 0 1 .544-.218z" fill="#07A3D7"/></svg>',
      validate(url: string) {
        const pattern = /^https?:\/\/(www\.)?bilibili\.com\/video\/[a-zA-Z0-9]+/
        return pattern.test(url)
      },
      transformURL(url: string) {
        const videoId = url.match(/\/video\/([a-zA-Z0-9]+)/)?.[1]
        return videoId
          ? `https://player.bilibili.com/player.html?bvid=${videoId}`
          : ''
      },
    },
    {
      label: {
        zh_CN: '优酷',
        en_US: 'Youku',
      },
      icon: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M270.528 902.592c-82.688-45.952-104.576-161.984-43.072-232 26.688-30.208 214.592-142.784 229.632-137.344 17.088 5.504 7.488-.64-112.768-71.36-105.92-62.464-129.152-83.776-144.896-129.792-34.816-105.664 58.112-218.944 166.08-202.496 24.576 4.096 102.528 42.56 175.616 87.168 13.696 8.32 70.4 41.216 125.76 73.472 119.616 69.376 153.792 97.472 178.368 148.288 20.48 41.856 24.576 100.928 10.24 151.68-8.896 32.32-41.664 78.976-71.04 100.992l-19.2 14.4-33.408-19.2c-19.2-11.008-34.176-17.92-34.176-15.808 0 1.344 12.288 10.24 27.328 18.56 15.04 8.896 27.328 17.152 27.328 19.2 0 4.8-281.6 168.832-334.208 194.24-51.904 26.112-100.48 26.112-147.584 0z" fill="#018EFF"/><path d="M665.984 654.4c0-1.088-6.912-5.888-15.936-10.624-20.16-10.112-21.248-5.888-1.088 4.736 16.512 9.024 17.024 9.6 17.024 5.888zm-50.56 5.952c-8.448-7.424-55.744-33.408-55.744-30.72 0 2.56 53.632 35.008 58.432 35.52 1.024 0 0-2.112-2.688-4.8z" fill="#018EFF"/><path d="M673.472 653.44a4171.008 4171.008 0 0 0-126.336-72.768c-43.712-24.064-92.224-52.864-233.6-137.344C238.4 398.72 213.76 374.016 199.424 332.16c-34.816-105.664 58.048-218.944 166.016-202.496 24.576 4.096 102.4 42.56 175.552 87.168 13.632 8.32 70.336 41.216 125.632 73.472 114.112 65.92 146.88 92.032 170.752 133.184 47.872 81.728 29.44 195.008-40.96 257.472-13.632 11.648-27.968 21.248-32.768 21.248-4.8-.64-45.12-21.952-90.176-48.704z" fill="#FF396E"/><path d="M270.464 902.592A152.32 152.32 0 0 1 193.28 781.76c-6.144-76.8 21.184-115.328 130.496-179.84l75.136-44.608L568.96 630.08c93.568 39.808 172.8 72.064 176.256 72.064 4.096 0 6.784 2.048 6.784 5.504 0 5.504-273.216 165.44-334.016 194.944-51.84 26.112-100.352 26.112-147.52 0z" fill="#00BEFF"/></svg>',
      validate(url: string) {
        const pattern = /^https?:\/\/v\.youku\.com\/v_show\/id_[a-zA-Z0-9]+/
        return pattern.test(url)
      },
      transformURL(url: string) {
        const videoId = url.match(/\/id_([a-zA-Z0-9]+)/)?.[1]
        return videoId ? `https://player.youku.com/embed/${videoId}` : ''
      },
    },
    {
      label: {
        zh_CN: 'Figma',
        en_US: 'Figma',
      },
      icon: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.324 8c0-1.475 1.2-2.675 2.675-2.675 1.475 0 2.675 1.2 2.675 2.675 0 1.475-1.2 2.675-2.675 2.675A2.678 2.678 0 0 1 8.324 8z" fill="#1ABCFE"/><path d="M3 13.325c0-1.475 1.2-2.675 2.675-2.675h2.65v2.675C8.325 14.8 7.125 16 5.65 16 4.175 16 3 14.8 3 13.325z" fill="#0ACF83"/><path d="M8.324 0v5.325H11c1.475 0 2.675-1.2 2.675-2.675C13.674 1.175 12.474 0 11 0H8.324z" fill="#FF7262"/><path d="M3 2.675C3 4.15 4.2 5.35 5.675 5.35h2.65V0H5.65C4.175 0 3 1.2 3 2.675z" fill="#F24E1E"/><path d="M3 8c0 1.475 1.2 2.675 2.675 2.675h2.65v-5.35H5.65C4.175 5.325 3 6.525 3 8z" fill="#A259FF"/></svg>',
      validate(url: string) {
        const pattern = /^https?:\/\/www\.figma\.com\/file\/[a-zA-Z0-9]+/
        return pattern.test(url)
      },
      transformURL(url: string) {
        const fileId = url.match(/\/file\/([a-zA-Z0-9]+)/)?.[1]
        return fileId
          ? `https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/file/${fileId}`
          : ''
      },
    },
    {
      label: {
        zh_CN: '墨刀',
        en_US: 'MockingBot',
      },
      icon: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 3h2.715v4.752H2V3zm6.958 0H6.242v4.752h2.716V3zm4.582 0h-2.716v4.752h2.716V3zM9.107 14l-1.096-2.5a3.905 3.905 0 0 0 2.812-3.748h2.716A6.621 6.621 0 0 1 9.107 14z" fill="#F33"/></svg>',
      validate(url: string) {
        const pattern = /^https?:\/\/modao\.cc\/app\/[a-zA-Z0-9]+/
        return pattern.test(url)
      },
      transformURL(url: string) {
        return url
      },
    },
    {
      label: {
        zh_CN: '腾讯视频',
        en_US: 'Tencent Video',
      },
      icon: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.314 14.541c-1.416-.025-1.71-1.416-1.964-3.16-.155-1.06-.182-2.155-.182-3.23 0-1.074.027-2.169.182-3.23.31-2.14.685-3.75 3.123-2.95 2.336.768 4.586 2.126 6.56 3.67.1.085.209.177.324.272.705.59 1.62 1.355 1.642 2.239-.021.882-.936 1.647-1.641 2.237-.115.096-.225.187-.324.274-1.975 1.543-4.225 2.901-6.561 3.67-.418.136-.774.203-1.08.208h-.08z" fill="#4396F7"/><path d="M2.98 13.143c-1.202-.029-1.527-.954-1.755-2.162l-.02-.1-.036-.206C1.025 9.847 1 8.991 1 8.152c0-.84.025-1.694.17-2.523l.036-.205.019-.1c.267-1.418.668-2.447 2.464-2.094-.151.487-.247 1.067-.339 1.692-.154 1.061-.181 2.156-.181 3.23 0 1.074.027 2.169.181 3.23.092.624.188 1.204.34 1.692a3.501 3.501 0 0 1-.592.07H2.98z" fill="#EF8E34"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.689 3.229c.125.025.256.055.395.094 2.181.6 4.28 1.66 6.124 2.866.66.483 1.812 1.16 1.834 1.962-.023.803-1.175 1.48-1.834 1.963-1.843 1.205-3.943 2.266-6.124 2.866-.139.038-.27.069-.395.094-.151-.488-.248-1.068-.338-1.693-.155-1.06-.182-2.156-.182-3.23 0-1.074.027-2.169.182-3.23.09-.62.185-1.197.335-1.683l.003-.009z" fill="#78E445"/><path d="M4.845 8.156c0-1.82.13-2.04.13-2.04.053-.234.18-.298.378-.241 0 0 .587.124 2.006.87 1.435.754 1.875 1.168 1.875 1.168.217.188.172.305 0 .483 0 0-.269.308-1.875 1.14-1.606.83-2.006.894-2.006.894-.239.056-.332-.015-.377-.24 0 0-.13-.21-.13-2.034z" fill="#fff"/></svg>',
      validate(url: string) {
        return url.startsWith('https://modao.cc/proto/')
      },
      transformURL(url: string) {
        const videoId = url.match(/\/cover\/[a-zA-Z0-9]+\/([a-zA-Z0-9]+)/)?.[1]
        return videoId ? `https://v.qq.com/iframe/player.html?vid=${videoId}` : ''
      },
    },
  ],
}
```

## 配置项说明

### webpages[].label

**说明**：插入第三方页面时，页面的名称或类型，支持多语言。

**类型**：`String` 或 `Object`

- `zh_CN`：简体中文
- `en_US`：英文

### webpages[].icon

**说明**：插入第三方页面时，插入的页面的 SVG 图标代码。

**类型**：`String`

### webpages[].validate

**说明**：插入第三方页面时，用于验证 URL 的函数。

**类型**：`Function`

**参数**：`url`，要验证的 URL。

**返回值**：`Boolean`，返回 `true` 表示 URL 有效，返回 `false` 表示 URL 无效。

### webpages[].transformURL

**说明**：插入第三方页面时，用于转换 URL 的函数。

**类型**：`Function`

**参数**：`url`，要转换的 URL。

**返回值**：`String`，返回转换后的 URL。





